<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王佳佳">
    <title></title>
    <style>
        *
        {
            box-sizing: border-box;
        }
        a
        {
            color: inherit;
            font-size: inherit;
            text-decoration: none;
        }
        .box
        {
            display: flex;
        }
        .box>div
        {
            margin-left: 10px;
            position: relative;
        }
        a
        {
            display: inline-block;
            width: 19px;
            height: 19px;
            background-image: url(star.png)
        }
        a.active
        {
            background-position: 0 -28px;
        }
        .box>div:hover .pingjia
        {
            display: block;
        }
        .pingjia
        {
            border: 1px solid gray;
            font-size: 12px;
            position: absolute;
            left: 0;
            top: 20px;
            width: 120px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>宝贝与描述相符</span>
        <div>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <div class="pingjia">五星好评</div>
        </div>
        <span class="result"></span>
    </div>

</body>
</html>

<script>
    var stars = document.querySelectorAll('a');
    var pingjia = document.querySelector('.pingjia');
    var result = document.querySelector('.result');
    var msg = 
    [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];


    // showstar();
    function showstar(count)
    {
        for(var i = 0; i < stars.length; i++)
        {
            if (i < count) 
            {
                stars[i].className = 'active';
            }
            else 
            {
                stars[i].className = '';
            }
        }
    }

    var score = 0;
    for(var i =0; i < stars.length; i++)
    {
        stars[i].index = i;
        stars[i].onmouseover = function()
        {
            //鼠标进入立即根据索引值展示星星  星星数量 = this.index + 1
            showstar(this.index + 1);
            var left = this.offsetLeft;
            pingjia.style.left = left + 'px';  //获取宽度
            //展示内容
            var amsg = msg[this.index];
            pingjia.innerHTML = '<strong style="color:red;">' + (this.index+1) + '分 ' + amsg.split('|')[0] + '</strong><br>' + amsg.split('|')[1];
        }
        //鼠标点击，记录分数
        stars[i].onclick = function()
        {
            score = this.index + 1;
            //展示最终评分结果
            result.innerHTML = '<strong style="color:red;">' + score + '分 </strong>' + msg[this.index].split('|')[1];
        }
        //鼠标出去，展示最终分数
        stars[i].onmouseout = function()
        {
            showstar(score)
        }

    }
</script>